// 链路割接
<template>
  <div class="lin-cut flex-column p-10">
    <div>
      <el-button type="primary" @click="next">获取连接关系</el-button>
    </div>
    <div class="flex-1 flex-column">
      <!-- 表头 -->
      <div class="flex w-100">
        <div class="data-cell index" style="height: 72px; line-height: 72px">
          序号
        </div>
        <div>
          <div class="flex">
            <!-- 网段名称 -->
            <div
              v-for="(item, index) in tableHead"
              :key="index"
              class="data-cell"
              :style="{ width: item.cable ? '450px' : '300px' }"
            >
              {{ item.segmentName }}
            </div>
          </div>
          <div class="flex">
            <!-- 节点名称 -->
            <div v-for="(item, index) in tableHead" :key="index" class="flex">
              <div
                class="data-cell"
                :style="{ width: index === 0 ? '150px' : '300px' }"
              >
                {{ item.startNode.nodeName }}
              </div>
              <div v-if="item.cable" class="data-cell">
                {{ item.cable.cableName }}
              </div>
              <div v-if="index === tableHead.length - 1" class="data-cell">
                {{ item.endNode.nodeName }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 表格数据 -->
      <div id="diagramContainer" class="w-100 flex-1">
        <div
          v-for="(row, rowIndex) in segmentList"
          :key="row.id"
          class="flex w-100"
        >
          <div class="data-cell">{{ rowIndex + 1 }}</div>
          <div
            v-for="(item, index) in row.segmentList"
            :key="index"
            class="flex"
          >
            <div
              class="data-cell"
              :class="[
                {
                  'border-bottom-none':
                    index !== 0 && rowIndex !== segmentList.length - 1,
                },
              ]"
            >
              <template v-if="showPort(item.startPort)">
                <i :id="item.startJsplumbId" class="mr-10 drop-dot" />
              </template>
              <template v-else>
                <i v-if="index !== 0" class="el-icon-remove mr-10" />
              </template>
              <span>{{ item.startPort.bizName }}</span>
            </div>
            <div v-if="item.fiber" class="data-cell">
              {{ item.fiber.fiberName }}
            </div>
            <div
              class="data-cell"
              :class="[
                {
                  'border-bottom-none':
                    index !== row.segmentList.length - 1 &&
                    rowIndex !== segmentList.length - 1,
                  'border-right-none': index !== row.segmentList.length - 1,
                },
              ]"
            >
              <span>{{ item.endPort.bizName }}</span>
              <template v-if="showPort(item.endPort)">
                <i :id="item.endJsplumbId" class="ml-10 drop-dot" />
              </template>
              <template v-else>
                <i
                  v-if="index !== row.segmentList.length - 1"
                  class="el-icon-remove ml-10"
                />
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import routeData from "./data/route.js";
import segmentList from "./data/segmentList.js";
import { jsPlumb } from "jsplumb";
export default {
  data() {
    return {
      jsplumb: null,
      jsplumbOptions: {
        endpoint: ["Dot", { radius: 7 }],
        connectorStyle: {
          outlineStroke: "#f5f5f5",
          strokeWidth: 1,
        },
        connector: ["StateMachine"],
        paintStyle: {
          fill: "#f5f5f5",
          outlineStroke: "#eee",
          strokeWidth: 1,
        },
      },
    };
  },
  computed: {
    routeData() {
      return routeData;
    },
    segmentList() {
      return segmentList.map((i) => {
        i.segmentList.forEach((j) => {
          j.startJsplumbId = j.startPort.deviceId + "_" + j.startPort.portId;
          j.endJsplumbId = j.endPort.deviceId + "_" + j.endPort.portId;
        });
        return i;
      });
    },
    tableHead() {
      return this.routeData.segmentList;
    },
  },
  methods: {
    // 是否可割接节点判断(能进行割接和检测的状态：空闲、成端、备用、损坏)
    showPort(data) {
      return (
        data.portCategory === "VARIABLE_POINT" &&
        (data.status === "IDLE" ||
          data.status === "CONN" ||
          data.status === "BACKUP" ||
          data.status === "DAMAGE")
      );
    },
    // 链接插件初始化
    readyJsPlumb() {
      this.$nextTick(() => {
        const self = this;
        jsPlumb.ready(() => {
          self.jsplumb = jsPlumb.getInstance();
          // 当链接建立前校验，只有同设备的两个端口才能建立连接
          self.jsplumb.bind("beforeDrop", function (info, aa) {
            return self.beforeDrop(info);
          });
        });
      });
    },
    // 建立链接前操作
    beforeDrop(data) {
      console.log("beforeDrop-data", data);
      const startDeviceId = data.sourceId.split("_")[0];
      const endtDeviceId = data.targetId.split("_")[0];
      return startDeviceId === endtDeviceId;
    },
    // 设置可割接端口图形点
    setConnectPort() {
      this.jsplumb.setContainer("diagramContainer");
      this.segmentList.forEach((i) => {
        i.segmentList.forEach((j, index) => {
          // 判断是否是最后一个节点，最后一个节点不设置可割接端口

          // 设置可连接端口点 id为设备id_端口id
          if (this.showPort(j.endPort) && index !== i.segmentList.length - 1) {
            this.jsplumb.addEndpoint(
              j.endJsplumbId,
              {
                anchors: "Right",
                isSource: true,
              },
              this.jsplumbOptions
            );
          }
          if (this.showPort(j.startPort) && index !== 0) {
            this.jsplumb.addEndpoint(
              j.startJsplumbId,
              {
                anchor: "Left",
                isTarget: true,
              },
              this.jsplumbOptions
            );
          }
        });
      });
    },
    next() {
      const connectArr = this.jsplumb.getAllConnections();
      console.log("this.jsplumb.getAllConnections()", connectArr);
      const cutList = connectArr.map((i) => {
        return {
          deviceId: i.sourceId.split("_")[0],
          portId: i.sourceId.split("_")[1],
          connPortId: i.targetId.split("_")[1],
        };
      });
      console.log(cutList);
    },
  },
  mounted() {
    console.log(this.routeData);
    console.log(this.segmentList);
    this.readyJsPlumb();
    // this.jsplumb.deleteEveryConnection()
    // this.jsplumb.deleteEveryEndpoint()
    this.$nextTick(() => {
      this.setConnectPort();
    });
  },
};
</script>
<style lang="scss" scoped>
.lin-cut {
  background: #020721;
  .drop-dot {
    // display: inline-block;
    // width: 16px;
  }
  .data-cell {
    padding: 6px 10px;
    width: 150px;
    height: 36px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    color: #fff;
  }
  .border-bottom-none {
    border-bottom: none;
  }
  .border-right-none {
    border-right: none;
  }
}
</style>
